<template>
  <div class="button">
    <h2>菜单组件</h2>
    <br>
    <!-- 外层 -->
    <el-menu 
        mode="horizontal"
        :collapse=false
        active-text-color="orange"

    >
        <!-- 菜单项:没有子级菜单 -->
        <!-- index属性:菜单的等级以及列表项 -->
        <el-menu-item index="1">首页</el-menu-item>

        <!-- 菜单项:有子级菜单 -->
        <el-sub-menu index="2">
            <!-- 使用插槽:编辑第二个一级菜单的名称 -->
            <template #title>商品类型</template>

            <!-- 设置二级菜单:是否在二级菜单内存在三级菜单 -->
            <el-menu-item index="2-1">数码产品</el-menu-item>
            <el-menu-item index="2-2">服装包饰</el-menu-item>
            <el-menu-item index="2-3">日用百货</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
            <template #title>个人中心</template>
            <el-menu-item index="3-1">我的购物车</el-menu-item>

            <el-sub-menu index="3-2">
                <template #title>我的订单</template>
            
                <el-menu-item index="3-2-1">已付款订单</el-menu-item>
                <el-menu-item index="3-2-2">未付款订单</el-menu-item>
            </el-sub-menu>


        </el-sub-menu>
    </el-menu>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>